<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '民宿入驻',
  },
}
</route>

<template>
  <div class="apply-from">
    <div class="title" v-if="step === 1">基本信息</div>
    <div class="title" v-if="step === 2">资质信息</div>

    <HotelStep1 v-show="step === 1" :data="step1" ref="stepRef1" />
    <HotelStep2 v-show="step === 2" :data="step2" ref="stepRef2" />

    <div class="bottom-box">
      <button v-if="step === 1" class="custom-button active" @click="nextStep()">下一步</button>
      <template v-if="step === 2">
        <div class="agreement">
          <wd-checkbox
            custom-class="agreement-custom-checkbox"
            v-model="agreement"
            checked-color="#1F2026"
          ></wd-checkbox>
          同意并授权
          <span class="active" @click="toAgreement('user_service1')">《某民宿房东服务协议》</span>
          <span class="active" @click="toAgreement('user_service1')">《某民宿房东诚信规则》</span>
          、
          <span class="active" @click="toAgreement('user_service1')">《某民宿房东内容协议》</span>
          和
          <span class="active" @click="toAgreement('user_service1')">
            《某民宿房东经营安全提示和须知》
          </span>
        </div>
        <div class="btn-group">
          <button class="custom-button hollow" @click="step--">上一步</button>
          <button class="custom-button" @click="handleSubmit()">提交</button>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { msgSuccess, msgNone } from '@/utils/index'
import { redirect } from '@/utils/page'
import { useUserStore } from '@/store/user'
import HotelStep1 from './components/HotelStep1'
import HotelStep2 from './components/HotelStep2'

const step = ref(1)
const step1 = reactive({ deskImgUrlsList: [] })
const step2 = reactive({})
const stepRef1 = ref()
const stepRef2 = ref()
const agreement = ref(false)

// 如果已经提交的，回显历史信息
// const userStore = useUserStore()
// uni.showLoading()
// http
//   .get('/artist-authorized-app/open/detail', {
//     id: userStore.userInfo.userId,
//   })
//   .then((res) => {
//     if (res) {
//       for (const key in stepRef1.value.mode) {
//         step1[key] = res[key]
//       }
//       for (const key in stepRef2.value.mode) {
//         step2[key] = res[key]
//       }
//       step1.id = res.id
//     }
//   })
//   .finally(() => {
//     uni.hideLoading()
//   })

function nextStep() {
  stepRef1.value.validate().then((res) => {
    Object.assign(step1, res)
    step.value++
  })
}

function handleSubmit() {
  stepRef2.value.validate().then((res) => {
    Object.assign(step2, res)

    if (agreement.value) {
      uni.showLoading()
      delete step1.deskImgUrlsList
      http
        .post('/hotels-info-app/apply', {
          ...step1,
          qualification: step2,
        })
        .then(() => {
          msgSuccess('提交成功').then(() => {
            redirect('/pages-sub/join-in/success')
          })
        })
        .finally(() => {
          uni.hideLoading()
        })
    } else {
      msgNone('请先阅读并勾选协议')
    }
  })
}

function toAgreement(type) {
  uni.navigateTo({
    url: `/pages-sub/system/agreement?type=${type}`,
  })
}
</script>

<style lang="scss" scoped>
@import url(./style.scss);
</style>
